<template>
  <div v-loading="loading" class="h-100 flex algin-center">
    <div v-if="isData" ref="chart" class="w-100 h-100" style="width: 100%; height: 100%" />
    <NullData v-else type="bar" />
  </div>
</template>
<script>
  import * as echarts from 'echarts'
  import commonMixin from './js/commonMixin'

  export default {
    mixins: [commonMixin],
    data() {
      return {
        isData: true,
        loading: false
      }
    },
    computed: {},
    created() {
      this.$nextTick(() => {
        this.renderChart()
      })
    },
    methods: {
      renderChart() {
        this.isData = true
        this.statusChart && this.statusChart.clear()
        this.statusChart && this.statusChart.resize()
        const colorData =
          this.getTheme === 'dark-theme'
            ? {
              important: [
                { offset: 1, color: 'rgba(43, 75, 245, 1)' },
                { offset: 0, color: 'rgba(2, 164, 255, 1)' }
              ],
              importantFault: [
                { offset: 1, color: 'rgba(251, 65, 53, 1)' },
                { offset: 0, color: 'rgba(251, 196, 53, 1)' }
              ],
              general: [
                { offset: 0, color: 'rgba(36, 248, 172, 1)' },
                { offset: 0.5, color: 'rgba(4, 215, 244, 1)' },
                { offset: 1, color: 'rgba(10, 218, 246, 1)' }
              ],
              generalFault: [
                { offset: 1, color: 'rgba(251, 196, 53, 1)' },
                { offset: 0, color: 'rgba(251, 65, 53, 1)' }
              ]
            }
            : {
              important: [
                { offset: 1, color: 'rgba(83, 140, 248, 1)' },
                { offset: 0, color: 'rgba(108, 200, 255, 1)' }
              ],
              importantFault: [
                { offset: 1, color: 'rgba(255, 151, 85, 1)' },
                { offset: 0, color: 'rgba(255, 211, 117, 1)' }
              ],
              general: [
                { offset: 0, color: 'rgba(105, 232, 202, 1)' },
                { offset: 0.5, color: 'rgba(4, 215, 244, 1)' },
                { offset: 1, color: 'rgba(93, 216, 223, 1)' }
              ],
              generalFault: [
                { offset: 0, color: 'rgba(255, 151, 85, 1)' },
                { offset: 1, color: 'rgba(255, 211, 117, 1)' }
              ]
            }
        const bizStatList = this.statisticsData.bizStatList
        bizStatList.sort(
          (a, b) =>
            Number(b.important) +
            Number(b.importantFault) +
            Number(b.general) +
            Number(b.generalFault) -
            Number(a.important) -
            Number(a.importantFault) -
            Number(a.general) -
            Number(a.generalFault)
        )
        const size = parseInt((this.staticsItem.height - 50) / 40)
        const percent = parseInt(size * 100 / bizStatList.length)
        const defaultEnd = percent > 100 ? 100 : percent
        // const defaultEnd = bizStatList.length < 5 ? 100 : parseInt(500 / bizStatList.length)
        const yData = []
        const importantBiz = []
        const importantFaultBiz = []
        const generalBiz = []
        const generalFaultBiz = []
        bizStatList.forEach(i => {
          yData.push(i.name)
          importantBiz.push(0 - i.important)
          importantFaultBiz.push(0 - i.importantFault)
          generalBiz.push(i.general)
          generalFaultBiz.push(i.generalFault)
        })
        const _this = this
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            formatter: params => {
              let name = ''
              const htmlArr = params.map((i, index) => {
                let seriesName = i.seriesName
                const value = Math.abs(i.value)
                if (index === 1) {
                  seriesName = _this.$t('IMPORTANT_FAULT_BIZ')
                }
                if (index === 3) {
                  seriesName = _this.$t('GENERAL_FAULT_BIZ')
                }
                name = i.name
                return i.marker + seriesName + ': ' + value
              })
              return `<div style="word-break: break-all;">${name}</div>` + htmlArr.join('</br>')
            },
            ..._this.tooltipOptions(),
            className: 'text-color echarts-tooltip-box'
          },
          legend: {
            icon: 'roundRect',
            top: 5,
            itemHeight: 10,
            itemWidth: 20,
            textStyle: {
              color: _this.homeAxisText(),
              fontSize: _this.resetSize(12)
            },
            data: [
              {
                name: _this.$t('IMPORTANT_BIZ'),
                itemStyle: {
                  color: colorData.important[0].color
                }
              },
              {
                name: _this.$t('GENERAL_BIZ'),
                itemStyle: {
                  color: colorData.general[0].color
                }
              },
              {
                name: _this.$t('FAULT_BIZ'),
                itemStyle: {
                  color: colorData.importantFault[0].color
                }
              }
            ]
          },
          grid: {
            left: 20,
            right: 20,
            bottom: 5,
            top: 40,
            containLabel: true
          },
          xAxis: {
            type: 'value',
            name: _this.$t('QUANTITY_PCS'),
            ..._this.axisOptions(),
            nameLocation: 'start',
            nameTextStyle: {
              align: 'right',
              verticalAlign: 'bottom',
              padding: [0, -8, -19, 0],
              fontSize: _this.resetSize(10),
              color: _this.homeAxisText()
            },
            minInterval: 1,
            axisLabel: {
              fontSize: _this.resetSize(12),
              color: _this.homeAxisText(),
              formatter: (value, index) => {
                return Math.abs(value)
              }
            }
          },
          yAxis: {
            type: 'category',
            ..._this.axisOptions(),
            data: yData,
            axisLabel: {
              fontSize: _this.resetSize(12),
              color: _this.homeAxisText(),
              formatter: (value, index) => {
                return value.length > 4 ? value.substring(0, 3) + '...' : value
              }
            }
          },
          dataZoom: [
            {
              type: 'inside',
              end: defaultEnd,
              minValueSpan: 2,
              orient: 'vertical'
            },
            {
              type: 'slider',
              width: 0,
              right: 8,
              showDetail: false,
              orient: 'vertical',
              borderColor: 'transparent',
              backgroundColor: 'transparent',
              fillerColor: 'transparent'
            }
          ],
          series: [
            {
              name: _this.$t('IMPORTANT_BIZ'),
              type: 'bar',
              stack: 'total',
              barMaxWidth: 15,
              itemStyle: {
                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, colorData.important)
              },
              data: importantBiz
            },
            {
              name: _this.$t('FAULT_BIZ'),
              type: 'bar',
              stack: 'total',
              barMaxWidth: 15,
              itemStyle: {
                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, colorData.importantFault)
              },
              data: importantFaultBiz
            },
            {
              name: _this.$t('GENERAL_BIZ'),
              type: 'bar',
              stack: 'total',
              barMaxWidth: 15,
              itemStyle: {
                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, colorData.general)
              },
              data: generalBiz
            },
            {
              name: _this.$t('FAULT_BIZ'),
              type: 'bar',
              stack: 'total',
              barMaxWidth: 15,
              itemStyle: {
                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, colorData.generalFault)
              },
              data: generalFaultBiz
            }
          ]
        }
        this.$nextTick(() => {
          !this.statusChart && (this.statusChart = echarts.init(this.$refs.chart))
          this.statusChart.setOption(option)
        })
      }
    }
  }
</script>
<style lang="scss" scoped></style>
./js/commonMixin
